<template>
  <div class="about" style="padding: 10px">
    <!-- 查询、新增 -->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin: 10px 0"
    >
      <el-form-item label="类型名">
        <el-input
          type="text"
          placeholder="请输入类型名"
          v-model="postTypeName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getPostType()" type="primary">查询</el-button>
        <el-button @click="handleAdd()" type="primary">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表 -->
    <el-table
      v-loading="loading"
      stripe
      border
      :data="postTypes"
      style="width: 100%; height: 500px; overflow: auto; "
    >
      <el-table-column prop="postTypeId" label="编号" sortable width="400"  align="center"></el-table-column>
      <el-table-column prop="postTypeName" label="类型名" width="400"  align="center">
      </el-table-column>

      <el-table-column label="操作" align="center" >
        <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
        <template #default="scope">
          <!-- 编辑 执行的函数 handleEdit,索引和整个数据行"对象"-->
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <!-- 删除的时候 执行的函数 handleDelete -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements"
      >
      </el-pagination>
    </div>

    <!--修改、新增的dialog界面 -->
    <el-dialog
      :title="title"
      v-model="dialogFormVisible"
      width="60%"
    >
      <el-form :model="updatepostType">
        <el-form-item
          label="类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="updatepostType.postTypeName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePostType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";



export default {
  name: "PostTypeManage",
  data() {
    return {
      postTypes: [], //查询的帖子类型信息
      totalElements: 1, //总条数
      currentPage: 1, //当前页
      pageSize: 6, //条数
      pages: 1, //页数
      //这里写了一个对象，包含postType对象中的属性
      postTypeName: '', //查询条件信息
      dialogFormVisible: false,
      //要修改、新增的post数据，和表单内容相关
      updatepostType: {},
      //指定修改、新增标题
      title: "",
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getPostType();
  },
  //自定义函数都可以写在 {}
  methods: {
    //新增
    handleAdd: function () {
      this.title = "新增";
      //清空数据
      this.updatepostType = {}; 
      //对话框显示
      this.dialogFormVisible = true;
    },

    //更新和新增
    updatePostType: function () {
      //调用后端修改接口
      request
        .post("/postType/", JSON.stringify(this.updatepostType))
        .then((res) => {
          //请求成功后
          //这里简化了
          if (res.code === 0) {
            //提示成
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });

            //关闭窗口
            this.dialogFormVisible = false;
            //重新加载数据
            this.getPostType();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("axios error: " + err);
        });
    },
    //查询
    getPostType: function () {
      //调用后端接口，返回数据,要使用axios,post请求
      // axios.post(url,json,{headers:{}}).then()
      this.loading=true
      request
        .get(
          "/postType/selectByPage/" +this.currentPage+"/"+this.pageSize+"?postTypeName="+this.postTypeName)
        .then((res) => {
          //请求成功后
          // =>res.data中
          this.postTypes = res.data.list;
          this.totalElements = res.data.total;
          this.currentPage = res.data.pageNum;
          this.pages = res.data.pages;
          this.loading=false
        })
        .catch((err) => {
          console.log("axios error: " + err);
        });
    },
    //修改
    handleEdit(index, row) {
      //设置dialogFormVisible 的值为true
      this.title = "修改";
      this.dialogFormVisible = true;
      this.updatepostType = row;
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该类型,该类型下可能有其他帖子，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //确定
        .then(() => {
          request.delete("/postType/" + row.postTypeId).then((res) => {
            if (res.code === 0) {
              //提示成功
              this.$message({
                showClose: true,
                message: "删除成功!",
                type: "success",
              });
              //重新加载数据
              this.getPostType();
            } else {
              this.$message({
                showClose: true,
                message: "删除失败!",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          //取消
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //改变每页记录数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //当前用户选择的每页显示几条记录呢
      this.pageSize = val;
      this.currentPage = 1;
      //重新调用
      this.getPostType();
    },
    //翻页(点击页码)
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getPostType(); // 获取新的数据
    },
  },
};
</script>

